<template>
  <view class="order-detail">
    <view class="navbar">
      <uni-nav-bar @clickLeft="goback" leftIcon="left" fixed="true" border="false" color="#FFF" statusBar="true"
        backgroundColor="#22b9a3" title="订单详情" />
    </view>
    <view class="reservation">
      <view class="title">
        预约信息
      </view>
      <view class="content">
        <uni-row>
          <uni-col span="12">
            <view class="filed">就诊医院</view>
          </uni-col>
          <uni-col span="12">
            <view class="value">{{order.hospitalName}}</view>
          </uni-col>
        </uni-row>
        <uni-row>
          <uni-col span="12">
            <view class="filed">就诊科室</view>
          </uni-col>
          <uni-col span="12">
            <view class="value">{{order.sectionName}}</view>
          </uni-col>
        </uni-row>
        <uni-row>
          <uni-col span="12">
            <view class="filed">就诊时间</view>
          </uni-col>
          <uni-col span="12">
            <view class="value"><uni-dateformat :date="order.hopeTime" format="yyyy-mm-dd hh:mm:ss"></uni-dateformat>
            </view>
          </uni-col>
        </uni-row>
        <uni-row>
          <uni-col span="12">
            <view class="filed">就诊人</view>
          </uni-col>
          <uni-col span="12">
            <view class="value">{{order.paitentName}}</view>
          </uni-col>
        </uni-row>
        <uni-row>
          <uni-col span="12">
            <view class="filed">联系电话</view>
          </uni-col>
          <uni-col span="12">
            <view class="value">{{order.paitentPhone}}</view>
          </uni-col>
        </uni-row>
        <uni-row>
          <uni-col span="12">
            <view class="filed">身份证号</view>
          </uni-col>
          <uni-col span="12">
            <view class="value">{{order.paitenCardNum}}</view>
          </uni-col>
        </uni-row>
        <uni-row>
          <uni-col span="12">
            <view class="filed">就诊人关系</view>
          </uni-col>
          <uni-col span="12">
            <view class="value">{{order.paitentRelation}}</view>
          </uni-col>
        </uni-row>
      </view>
    </view>

    <view class="order">
      <view class="title">
        订单信息
      </view>
      <view class="content">
        <uni-row>
          <uni-col span="12">
            <view class="filed">服务项目</view>
          </uni-col>
          <uni-col span="12">
            <view class="value">{{order.programName}}</view>
          </uni-col>
        </uni-row>
        <uni-row>
          <uni-col span="12">
            <view class="filed">订单号</view>
          </uni-col>
          <uni-col span="12">
            <view class="value">{{order.no}}</view>
          </uni-col>
        </uni-row>
        <uni-row>
          <uni-col span="12">
            <view class="filed">下单时间</view>
          </uni-col>
          <uni-col span="12">
            <view class="value"><uni-dateformat :date="order.createTime" format="yyyy-mm-dd hh:mm:ss"></uni-dateformat>
            </view>
          </uni-col>
        </uni-row>
        <uni-row>
          <uni-col span="12">
            <view class="filed">订单金额</view>
          </uni-col>
          <uni-col span="12">
            <view class="value">{{( order.totalPrice/100).toFixed(2)}}&nbsp;元</view>
          </uni-col>
        </uni-row>
        <uni-row>
          <uni-col span="12">
            <view class="filed">额外需求</view>
          </uni-col>
          <uni-col span="12">
            <view class="value">{{ order.memberRemark}}</view>
          </uni-col>
        </uni-row>
      </view>
    </view>
    <view class="staff">
      <view class="title">
        服务人员信息
      </view>
      <view class="content">
        <uni-row>
          <uni-col span="12">
            <view class="filed">姓名</view>
          </uni-col>
          <uni-col span="12">
            <view class="value">{{staff.name}}</view>
          </uni-col>
        </uni-row>
        <uni-row>
          <uni-col span="12">
            <view class="filed">性别</view>
          </uni-col>
          <uni-col span="12">
            <view class="value">{{staff.sex==1?'男':'女'}}</view>
          </uni-col>
        </uni-row>
        <uni-row>
          <uni-col span="12">
            <view class="filed">工号</view>
          </uni-col>
          <uni-col span="12">
            <view class="value">{{staff.no}}</view>
          </uni-col>
        </uni-row>
        <uni-row>
          <uni-col span="12">
            <view class="filed">电话</view>
          </uni-col>
          <uni-col span="12">
            <view class="value">{{staff.phone}}</view>
          </uni-col>
        </uni-row>
      </view>
    </view>
  </view>
</template>

<script setup>
  import * as http from '@/utils/http'
  import wechatMiniProgramPay from '@/utils/pay';
  import {
    showToastAndDo
  } from '@/utils/toast.js'
  import {
    ref,
    reactive
  } from 'vue';
  import {
    onLoad
  } from '@dcloudio/uni-app'
  import {
    useUserInfo
  } from '@/stores/userinfo.js';

  const userInfo = useUserInfo()
  onLoad(async (option) => {
    userInfo.getLoginInfo()
    let orderId = option.orderId
    const result = await http.getRequest("/peizhen/order/get", {
      id: orderId
    })
    if (result.code == 0) {
      order.value = result.data
    } else {
      uni.showToast({
        title: '获取订单详情失败失败',
        icon: 'error',
        duration: 1000
      })
    }
    const staffResult = await http.getRequest("/peizhen/staff/get", {
      id: order.value.staffId
    })
    if (staffResult.code == 0) {
      staff.value = staffResult.data
    } else {
      uni.showToast({
        title: '获取陪诊师信息失败',
        icon: 'error',
        duration: 1000
      })
    }
  })

  const order = ref({})
  const staff = ref({})
  //导航返回
  function goback() {
    uni.navigateBack()
  }

</script>

<style lang="scss" scoped>
  .navbar ::v-deep .uni-nav-bar-text {
    font-size: $uni-font-size-title !important;
    font-family: "siyuan";
  }

  .order-detail {
    background-color: #f5f5f5;
    padding-bottom: 150rpx;
  }

  .process {
    position: fixed;
    z-index: 100;
    width: 710rpx;
    padding-top: 50rpx;
    margin-left: 20rpx;
    margin-right: 20rpx;
    border-radius: 10rpx;
    height: 120rpx;
    background-color: #fff;

    ::v-deep .uni-steps__row-title {
      font-size: 35rpx !important;
      text-align: center;
    }

    ::v-deep .uni-steps__row-container {
      margin-top: 15rpx;
    }

    ::v-deep .uni-steps__row-line-item {
      line-height: 30rpx !important;
    }

    ::v-deep .uni-steps__row-circle {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      background-color: #f0f8f7 !important;
    }

    ::v-deep .uni-icons {
      font-size: 60rpx !important;
    }
  }

  .card {
    display: flex;
    flex-direction: column;
    margin: 190rpx 20rpx 20rpx 20rpx;
    border-radius: 15rpx;
    height: 180rpx;
    background-color: #30baa1;

    .title {
      color: #fff;
      padding-top: 30rpx;
      padding-left: 15rpx;
      font-size: 35rpx;
    }

    .desc {
      padding-left: 15rpx;
      padding-top: 30rpx;
      font-size: 30rpx;
      color: #f0f8f7;
    }


  }

  .reservation {
    margin: 20rpx 20rpx 20rpx 20rpx;
    border-radius: 15rpx;
    background-color: #fff;
    padding-bottom: 20rpx;

    .title {
      padding-top: 42rpx;
      padding-bottom: 42rpx;
      padding-left: 27rpx;
      font-size: 35rpx;
      letter-spacing: 2rpx;
      font-weight: 500;
    }

    .content {
      padding-left: 27rpx;
      padding-right: 27rpx;

      ::v-deep .uni-row {
        margin-bottom: 30rpx;
      }

      .filed {
        text-align: left;
        color: darkgrey;
        font-family: "STHeiti Light", "华文细黑", serif;
        ;
      }

      .value {
        width: 100%;
        text-align: right;
      }
    }

  }

  .order {
    margin: 20rpx 20rpx 20rpx 20rpx;
    border-radius: 15rpx;
    background-color: #fff;
    padding-bottom: 20rpx;

    .title {
      padding-top: 42rpx;
      padding-bottom: 42rpx;
      padding-left: 27rpx;
      font-size: 35rpx;
      letter-spacing: 2rpx;
      font-weight: 500;
    }

    .content {
      padding-left: 27rpx;
      padding-right: 27rpx;

      ::v-deep .uni-row {
        margin-bottom: 30rpx;
      }

      .filed {
        text-align: left;
        color: darkgrey;
        font-family: "STHeiti Light", "华文细黑", serif;
        ;
      }

      .value {
        width: 100%;
        text-align: right;
      }
    }

  }

  .staff {
    margin: 20rpx 20rpx 20rpx 20rpx;
    border-radius: 15rpx;
    background-color: #fff;
    padding-bottom: 20rpx;

    .title {
      padding-top: 42rpx;
      padding-bottom: 42rpx;
      padding-left: 27rpx;
      font-size: 35rpx;
      letter-spacing: 2rpx;
      font-weight: 500;
    }

    .content {
      padding-left: 27rpx;
      padding-right: 27rpx;

      ::v-deep .uni-row {
        margin-bottom: 30rpx;
      }

      .filed {
        text-align: left;
        color: darkgrey;
        font-family: "STHeiti Light", "华文细黑", serif;
        ;
      }

      .value {
        width: 100%;
        text-align: right;
      }
    }

  }

  //付款按钮
  .pay-card {
    position: fixed;
    bottom: 10rpx;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx;
    border: 1rpx solid #ddd;
    border-radius: 10rpx;
    background-color: #fff;
  }

  .card-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
  }

  .price {
    font-size: 45rpx;
    font-weight: bold;
    color: #22b9a3;
  }

  .buy-btn {
    margin-right: 10rpx;
    padding: 10rpx 40rpx;
    width: 140rpx;
    height: 50rpx;
    line-height: 50rpx;
    background-color: #22b9a3;
    color: #fff;
    border-radius: 50rpx;
    text-align: center;
    font-size: 28rpx;
  }

  .cal-btn {
    margin-right: 10rpx;
    padding: 10rpx 40rpx;
    width: 140rpx;
    height: 50rpx;
    line-height: 50rpx;
    color: darkgray;
    border-radius: 50rpx;
    text-align: center;
    font-size: 28rpx;
    border: solid 1px darkgray;
  }
</style>